<template>
	<view class="details">
		<uv-swiper :list="item.slider_image" height="800rpx" @change="e => current = e.current">
			<template v-slot:indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ current + 1 }}/{{ item.slider_image.length }}</text>
				</view>
			</template>
		</uv-swiper>
		<view class="content">
			<view class="box">
				<view class="flex justify-between">
					<view class="price">
						<text class="price_icon">¥</text>
						<text class="price_text1">{{ item.price_integer }}</text>
						<text class="price_text2" v-if="item.price_decimal">.{{ item.price_decimal }}</text>
					</view>
					<uv-text :text="`已售${item.sales || 0}件`" color="#868585" size="24rpx" align="right" />
				</view>
				<uv-text :text="item.store_name" size="34rpx" color="#333" bold />
			</view>
			<uv-gap height="10" bgColor="transparent" v-if="selected" />
			<view class="box" v-if="selected">
				<view class="flex align-center">
					<uv-text text="已选" class="uv-text-init" color="#333" size="28rpx" />
					<uv-text :text="selected" color="#333" size="28rpx" style="margin-left: 20rpx;" />
				</view>
			</view>

			<uv-gap height="10" bgColor="transparent" />
			<view class="box">
				<view class="flex align-center">
					<uv-icon name="car" size="20" color="#333" style="transform:scaleX(-1)" />
					<uv-text text="广东揭阳 快递:免邮" color="#333" size="28rpx" style="margin-left: 20rpx;" />
				</view>
			</view>

			<uv-gap height="20" bgColor="transparent" />
			<view class="box">
				<view class="flex align-center justify-between">
					<uv-text :text="`商品评价(${item.comment_num || 0})`" color="#333" size="28rpx" />
					<uv-text text="查看全部" color="#B4B2B4" size="24rpx" align="right" suffixIcon="arrow-right"
						iconStyle="font-size:24rpx;color:#B4B2B4" />
				</view>
			</view>
			<uv-line />
			<view class="box comment">
				<view class="item" v-for="e in item.comment" :key="e.id">
					<view class="flex">
						<uv-image :src="e.avatar || getIconPath('avatar.png')" width="28" height="28" shape="circle" />
						<uv-text :text="e.nickname" size="28rpx" color="#333" style="margin-left: 20rpx;" />
					</view>
					<uv-gap height="10" bgColor="transparent" />
					<uv-text :text="e.content" size="28rpx" color="#333" />
				</view>
			</view>

			<uv-gap height="10" bgColor="transparent" />
			<RecProduct :rec_id="id" />

			<uv-gap height="10" bgColor="transparent" />
			<view class="box" style="padding: 0;">
				<rich-text :nodes="item.details" class="rich" />
			</view>
		</view>
		<uv-gap height="100" bgColor="transparent" />
		<view class="goOrder">
			<view class="flex align-center">
				<view class="item">
					<uv-icon customPrefix="lst-icon" name="dianpu" size="20" color="#333" />
					<uv-text text="店铺" size="24rpx" color="#333" align="center" />
				</view>
				<view class="item">
					<uv-icon customPrefix="lst-icon" name="pinglunTotal" size="20" color="#333" />
					<uv-text text="联系商家" size="24rpx" color="#333" align="center" />
				</view>
			</view>
			<view class="flex align-center">
				<button @click="goOrder('cart')">加入购物车</button>
				<button @click="goOrder('buy')">立即购买</button>
			</view>
		</view>
		<uv-popup mode="bottom" ref="skusRef" :round="10">
			<lst-skus :skus="item.sku_object || { skus: [], specs: [] }" :name="type" :item="item || {}" @select="skusSelect" :initSkus="skus" />
		</uv-popup>

		<movable-area class="movable-area">
			<movable-view direction="vertical" :y="windowHeight" class="movable-view">
				<view class="cart" @click.stop="cartClick">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/cb073202508161256243980.png" mode="widthFix" />
					<view class="badge">
						<uv-badge type="warning" max="99" :value="cartNum" />
					</view>
				</view>
				
				<view class="cart share-badge" @click.stop="doShare">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0919/80707202509191952475732.png" mode="widthFix" />
					
				</view>
				
				
			</movable-view>
		</movable-area>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		storeToRefs
	} from "pinia"
	import {
		useUserStore, useMarketStore
	} from '@/store'
	import {
		onLoad,onShareAppMessage, onShareTimeline
	} from '@dcloudio/uni-app'
	
	import {
		getMarketProductDetail,
		addMarketCart,
		getMarketCartNum
	} from '@/api'
	

	
	
	import {
		getIconPath
	} from '@/util'
	import RecProduct from './components/RecProduct.vue'

	import { share } from "@/util/share.js";
	
	
	const product = ref({
	  id: 0,
	  title: '',
	  desc: '',
	  imageUrl: ''
	})
	const shareLink =ref('')
	let wxConfig = {}


	const user = useUserStore()
	const market = useMarketStore()
	const {
		token
	} = storeToRefs(user)

	const id = ref('')
	const type = ref('')
	const skus = ref('')
	const cartNum = ref(0)
	const current = ref(0)
	const skusRef = ref(null)
	const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 250)
	const selected = computed(() => {
		if (!skus.value || !skus.value.item) return ''
		return skus.value.item.spec_values.join('-')
	})

	const item = ref({
		slider_image: [],
		sku_object: {
			skus: [],
			specs: []
		}
	})

	const skusOpen = () => skusRef.value.open()
	const skusClose = () => {
		type.value = ''
		skusRef.value.close()
	}
	
	// 小程序分享
	onShareAppMessage(() => ({
	  title: product.value.title,
	  path: `/pages-home/service/detail?id=${product.value.id}`, 
	  imageUrl: product.value.imageUrl
	}))
	
	onShareTimeline(() => ({
	  title: product.value.title,
	  query: `id=${product.value.id}`,
	  imageUrl: product.value.imageUrl
	}))
	
	

	const copyLink = (href) => {
	  uni.setClipboardData({
	    data:href,
	    success: () => {
	      uni.showToast({ title: '已复制', icon: 'success' })
	      // 自动弹出提示，引导用户打开微信
	      setTimeout(() => {
	        uni.showModal({
	          title: '复制成功',
	          content: '已复制推荐内容，快去微信粘贴分享给朋友吧！',
	          showCancel: false
	        })
	      }, 800)
	    },
	    fail: () => {
	      uni.showToast({ title: '复制失败', icon: 'none' })
	    }
	  })
	}
	
	const doShare = () => {
		let option={
	      title: product.value.title,
	      summary: product.value.desc,
	      href: "https://consul-h5.qiershenghuo.com/pages-home/service/detail?id="+product.value.id,
		  imageUrl: product.value.imageUrl
	    }
		console.log('doShare--option',option)
		
		copyLink(option.href)
		
		
		//share(option);
	}

	const goOrder = async (name) => {
		if (!token.value) {
			uni.showToast({
				title: '请先登录',
				mask: true,
				icon: 'none'
			})
			const url = '/pages-home/market/details?id=' + item.value.id
			setTimeout(() => {
				uni.navigateTo({
					url: `${uni.$config.loginPage}?redirect=${encodeURIComponent(url)}`
				})
			}, 1000)
			return
		}
		type.value = name
		skusOpen()
	}

	const skusSelect = async (e) => {
		skus.value = e
		skusRef.value.close()
		if (!skus.value) return
		let cart_id = 0
		if (skus.value.item) {
			const {
				id,
				product_id
			} = skus.value.item
			cart_id = (await addMarketCart({
				product_id,
				sku_id: id,
				cart_num: skus.value.num
			})).result
		} else {
			cart_id = (await addMarketCart({
				product_id: item.value.id,
				sku_id: 0,
				cart_num: skus.value.num
			})).result
		}
		if (type.value === 'cart') {
			getCartNum()
			if (cart_id>0){
				uni.$uv.toast('添加成功')
			}
		} else {
			//直接购买
			let cart_ids = []
			cart_ids.push(cart_id)
			market.setOrderData(cart_ids);
			uni.navigateTo({
				url: '/pages-home/market/confirm_order'
			})
		}
	}

	const cartClick = () => {
		uni.navigateTo({
			url: '/pages-home/market/index?type=cart'
		})
	}

	const getCartNum = async () => {
		if (!token.value) return
		const {
			result
		} = await getMarketCartNum()
		cartNum.value = result
	}
	

	onLoad(async (option) => {
		if (!option.id) return
		id.value = Number(option.id)
		getCartNum()
		const {
			result
		} = await getMarketProductDetail(option.id)
		item.value = result
		const price = result.price.toString().split('.')
		item.value.price_integer = price[0]
		item.value.price_decimal = price[1]
		item.value.details = result.details?.replace(/<img/g, '<img style="max-width:100%"')
		
		product.value.id=option.id
		product.value.title='为您推荐'
		product.value.desc= result.store_name
		product.value.imageUrl=result.image
		shareLink.value=`/pages-home/market/details?id=${option.id}`
        console.log('---product.value----',product.value)
		console.log('---shareLink.value----',shareLink.value)
		
		
	})
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.details {
		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}

		:deep(.uv-swiper__indicator) {
			right: 30rpx;
		}

		.box {
			padding: 30rpx;
			background-color: #fff;
		}

		.price {

			.price_icon {
				font-size: 24rpx;
				color: #CC2C25;
			}

			.price_text1 {
				font-size: 60rpx;
				color: #CC2C25;
			}

			.price_text2 {
				font-size: 30rpx;
				color: #CC2C25;
			}
		}

		.comment {
			.item {
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.goOrder {
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			position: fixed;
			align-items: center;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			justify-content: space-between;

			button {
				color: #fff;
				font-size: 28rpx;
				border-radius: 0;
				padding-left: 40rpx;
				padding-right: 40rpx;

				&:after {
					border: none;
				}

				&:first-child {
					background-color: #F6CA47;
					border-radius: 100rpx 0 0 100rpx;
				}

				&:last-child {
					background-color: #DF4728;
					border-radius: 0 100rpx 100rpx 0;
				}
			}

			.button-hover {
				opacity: .8;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-right: 30rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.rich {
			image {
				max-width: 100% !important;
			}

			img {
				max-width: 100% !important;
			}
		}

		.movable-area {
			pointer-events: none;
		}

		.movable-view {
			pointer-events: auto;
		}
		
		
		.share-badge{
			right: 6rpx;
			bottom:300rpx;
			position: absolute;
			image {
				width: 30rpx;
				height: 30rpx;
				
			}
		}

		.cart {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			pointer-events: auto;
			position: relative;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}

			.badge {

				right: 6rpx;
				top: 10rpx;
				position: absolute;
			}
		}
	}
</style>